<template>
  <div id="app">
    <log-in v-if="!LogIn" @LogSuc="logCheck"></log-in>
    <template v-if="LogIn">
      <el-container class="Page">
        <!-- 导航栏 -->
        <sider-bar></sider-bar>
        <el-container class="mainPage" direction="vertical">
          <!-- 头部 -->
          <my-header></my-header>
          <!-- 页面 -->
          <el-main class="mainContent">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </template>
  </div>
</template>


<script>
import SiderBar from "./components/siderbar.vue";
import MyHeader from "@/components/myheader";
import LogIn from "./components/login";
export default {
  name: "App",
  components: {
    "sider-bar": SiderBar,
    MyHeader,
    LogIn,
  },
  methods: {
    logCheck() {
      this.LogIn = "true";
    },
  },
  data() {
    return {
      orderMsg: [
        { orderId: 1, checkTime: 2022 - 3 - 2, roomType: "温馨大床房" },
      ],
      msgLength: 0,
      LogIn: false,
    };
  },
  created() {
   
     
        setInterval(() => {
          if (this.orderMsg.length > this.msgLength && this.LogIn) {
            console.log(this.orderMsg.length, this.msgLength);
            this.$notify.info({
              title: "订单提醒",
              duration:0,
              position:'bottom-right',
              message:
                this.orderMsg[this.msgLength].roomType +
                "\r" +
                this.orderMsg[this.msgLength].checkTime,
            });
            this.msgLength += 1;
          }
        }, 1000);   
      
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 900px;
}
.Page {
  height: 100%;
  position: relative;
}
.mainContent {
  padding-top: 50px;
  position: relative;
  top: 0px;
}
</style>
